<template>
    <div class="PurchaseOrderlist">
        <div class="title flex aic">
            <h5 class="flex aic ">PURCHASE ORDER LIST</h5>
        </div>
        <div class="orderlist phighit1">
            <el-table :data="purchaseOrderDetailList" v-loading="poLeading" :cell-style="setCellStyle" @row-click="getPurOrderID"
                v-el-table-infinite-scroll="refresh" height="100%">
                <el-table-column fixed prop="Purchaseordername" label="PorderID" width="150" />
                <el-table-column prop="state_text" label="State" width="100" />
                <el-table-column prop="firstname" label="Supplier" width="200" />
                <el-table-column prop="create_name" label="Founder" width="120" />
                <el-table-column prop="sale" label="Sales" width="120" />
                <!-- <el-table-column prop="total" label="Total" width="100" /> -->
                <el-table-column prop="create_time" sortable label="CreationTime" width="200" />
            </el-table>
        </div>

    </div>
</template>

<script setup>

const setCellStyle = ({ row }) => {
    if (row.purchaseorder_id == props.purchaseorder_id) {
        return {
            color: '#409eff !important'
        }
    }
}
const props = defineProps({
    purchaseOrderDetailList: Object,
    purchaseorder_id: Number,
    poLeading:Boolean
})
const emits = defineEmits(['getPurchaseOrderList1', 'getPurOrderID'])
const refresh = () => {
    emits('getPurchaseOrderList1')
}
const getPurOrderID = (row) => {
    emits('getPurOrderID', row)
}
</script>

<style lang="less" scoped>
.PurchaseOrderlist {
    width: 100%;
    margin-top: 2vh;

    .el-table {
        --el-table-row-hover-bg-color: rgba(174, 179, 179, 0.219);
    }
    .title {
        height: 4vh;
        padding-left: 10px;
    }

    .orderlist {
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        height: 39vh;

    }

    .el-table .cell {
        padding: 0;
    }
}
</style>